import React, { useEffect, useState } from 'react';
import { Button, List, SearchBar, SideBar, Tabs, Toast } from 'antd-mobile';
import './App.css';
import { FundsObj } from './type';
import Group from './components/Group';
import FundCard from './components/FundCard';
import { useMount } from 'ahooks';
import { NoticeBar } from 'zarm';
import { debtCodeArr, zongCodeArr, fineCodeArr, iqooCodeArr, zongCodeArr2, smallCodeArr } from './constants';
import request, { corsRequest } from './request';
import Search from './components/Search';
import Count from './components/Count';
import Expect from './components/Expect';

function App() {
  const [tabKey, setTabKey] = useState('fine');

  return (
    <div className="pageContainer">
      <Tabs
        activeKey={tabKey}
        onChange={(key) => {
          setTabKey(key);
        }}
      >
        <Tabs.Tab title="估值" key="estimate"></Tabs.Tab>
        <Tabs.Tab title="优秀基金" key="fine"></Tabs.Tab>
        <Tabs.Tab title="小盘股" key="small"></Tabs.Tab>
        <Tabs.Tab title="含债高" key="debt"></Tabs.Tab>
        <Tabs.Tab title="IQOO" key="iqoo"></Tabs.Tab>
        <Tabs.Tab title="总" key="zong"></Tabs.Tab>
      </Tabs>
      {tabKey === 'estimate' && <Expect fundsCode={zongCodeArr2} />}
      {tabKey === 'fine' && <Count fundsCode={fineCodeArr} />}
      {tabKey === 'small' && <Count fundsCode={smallCodeArr} />}
      {tabKey === 'debt' && <Count fundsCode={debtCodeArr} />}
      {tabKey === 'iqoo' && <Count fundsCode={iqooCodeArr} />}
      {tabKey === 'zong' && <Count fundsCode={zongCodeArr2} />}
    </div>
  );
}

export default App;
